Three years ago, we launched Clarity — an open source and enterprise-focused design system. Over the last three years, Clarity grew from a small design system into the foundation of over 100 products and services within VMware. Thousands of developers and hundreds of teams use Clarity’s user experience patterns, CSS styles, icons, and Angular components to deliver excellent user experience.

Outside of VMware, dozens of companies use Clarity either directly or as the starting point for their own design systems. Over 25,000 engineers and designers use Clarity every single month to deliver amazing experiences to their customers.

This is just the beginning.

Today, as we reflect on what the Clarity team has accomplished, we’re also looking towards Clarity’s future.

Clarity’s future is user-focused, framework-independent, accessible, enterprise-ready, and open source.

User-focused

Clarity’s design patterns are driven by our work with teams, customers, and product designers embedded directly within product teams. A design system’s job is to enable developers and designers to deliver the best experience possible to their end users. It does this by working with teams to better understand the standard patterns that can help them solve their problems. Clarity then bakes these insights into code for engineering teams. Building a design system allows teams to focus more on the specifics of their user scenarios and less on the generic design patterns meant to deliver them. Clarity also ensures that as a company’s portfolio of user experiences grows, the look and feel and user expectations remain consistent.

Clarity’s user focus is the foundation of Clarity’s Design System and will continue to be the driving force of how we build, improve, and change Clarity as we move forward.

Our patterns might change and our experiences might continue to shift as we improve, but our focus on users is what will always drive us.

In order to do this, we spend hundreds of hours with our customers — and their customers — to better understand their needs and areas where we can improve. We divide our user focus into three groups:

1. Designers: how can we serve designers better.
2. Developers: how can we offer the best developer experience.
3. Their customers: are we building the right patterns to build great experiences for the end user?

Framework-independent

Today, much of Clarity’s assets are framework-independent. We want our design patterns to deliver an effective experience to our customers regardless of the framework used. Our CSS library (ClarityUI) delivers a CSS only set of styles that can be used with any framework. Our icons library (Clarity Icons) is built on top of web components and can be used independent of any framework. It can even be used independent of Clarity itself.

That said, if you need interactive components with complicated data-bindings like the datagrid, you must use our Angular library of components (Clarity Angular). Clarity Angular is used all across VMware and the industry. It’s been downloaded over a million times and continues to be one of our most popular Clarity packages.

In the short term, Angular will continue to be our framework of focus. However, ultimately, Clarity’s future is framework-independent.

It’s not because we believe frameworks are going away but because we want to ensure developers are getting the greatest benefit from our library regardless of their choice of framework. Framework independence also keeps with Clarity’s tradition of staying ahead of the prevailing trends in user interface development.

Clarity Core is a key effort in this initiative — in the next few weeks, we will be announcing Clarity’s investment in building Clarity Core. It will be a library of pure web components that will work in all browsers supported today by the Clarity team. It will be theme-able with CSS custom properties — yes, even in IE11 — so that teams using Clarity will not be held back by the browsers of yesteryear.

Clarity Core will make it possible for Clarity’s UI components to be used with React, Vue.js, and more. It will even form the core (get it?) for Clarity Angular in the future.

While the Clarity team has been very successful with taking bets on the future of web development, we can’t predict the future. We can’t say what the framework landscape will look like three or five years down the road. That’s why we are embracing the concept of Clarity Core being “minimally stateful”. We don’t just want the components in Clarity Core to “work” in your framework of choice. We want them to be easy and pleasurable to work with.

Keep an eye for a more detailed announcement about Clarity Core in the coming week or two.

Accessible

It’s no one’s intention to leave out a percentage of the population, but as a design system, we deeply care about accessibility. We firmly believe that the applications built on top of Clarity should be accessible to all. To accomplish this, we’re investing heavily in ensuring Clarity itself is accessible. We’re also working hard to ensure Clarity is never an obstacle in building accessible applications. In addition, we’ll be making a significant investment in educating designers and developers on how to use Clarity to ensure the resulting applications they build are accessible.

Over the next few months, we’re shifting a big part of the team’s focus to solving core accessibility issues that we’ve been testing within Clarity. With Clarity 2.0, we aim to be the framework of choice for accessibility. By 3.0, we will be leading and innovating in delivering accessible solutions to the market.

Enterprise-ready

As we use Clarity within VMware, we’re building products that most of the Fortune 500 use. Clarity is at the core of VMware’s software. This means it is at the core of the user experience and user interface in tens of thousands of data centers across the world. Using Clarity is mission-critical for these organizations.

Clarity is also used in consumer-level applications and in consumer companies, but building enterprise-ready and enterprise-tested applications will continue to be at the core of our mission.

“Enterprise-ready” means we’re focused on performance, scalability, usability, compliance, and extensibility of Clarity’s technical infrastructure. Enterprise raises the bar for usability, it doesn’t lower it.

Open Source

Our vision since the inception of Clarity has been focused on building a community of designers and developers working together to deliver excellent solutions to their customers. That has not changed.

Clarity is and will continue to be open source. This includes future solutions like Clarity Core, our web component library.

Clarity’s vibrant community of users, contributors, and early testers allows us to build a better design system every day. We’re indebted to an amazing community of passionate makers who surprise us with their creativity and passion every single day.

Clarity’s open source focus extends beyond Clarity’s license, it’s at the core of what we do.

Join us on this journey. Contribute, share the message, and build with Clarity. Looking forward to the future of design systems.